<template>
    <div class="body">
        <div class="sbody" ref="sbody">
            <ul class="tabNav">
                <li :class="{tab_active:iscur==2}" @click="turnclick(2)">
                    <div>已完成</div>
                    <p></p>
                </li>
                <li :class="{tab_active:iscur==0}" @click="turnclick(0)">
                    <div>进行中</div>
                    <p></p>
                </li>
                <li :class="{tab_active:iscur==1}" @click="turnclick(1)">
                    <div>待审核</div>
                    <p></p>
                </li>
                <li :class="{tab_active:iscur==3}" @click="turnclick(3)">
                    <div>已下线</div>
                    <p></p>
                </li>
            </ul>

            <img v-if="pagelistmis.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

            <ul class="missionlist">
                <li v-for="(item,index) in listmis" :key="index">
                    <div>
                        <h1 class="ellipsis">{{item.task_name}}</h1>
                        <h2>{{item.created_at.slice(0,7)}}</h2>
                    </div>
                    <div>
                        <a>奖励</a>
                        <h1>￥{{item.amount/100 | money}}</h1>
                        <h3 :class="{active:iscur==2&&item.online_status==1 || iscur==0}" @click="tomission(item.id,item.online_status,item.task_id)">{{buttontext}}</h3>
                    </div>
                </li>
            </ul>

            <h5 v-if="listmis.length>0">{{loadText}}</h5>
        </div>
    </div>
</template>

<script>
    import {axiosPost} from "../../axios";

    export default {
        name: "",
        data() {
            return {
                iscur: 2,
                buttontext: '任务',
                ceshi: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                listmis: [],
                pagenum:1,
                loadText:'加载更多',
                totalPage:0,
                pagelistmis:[],
                user_id:''
            }
        },
        mounted() {
            this.$nextTick(()=>{
                this.turnclick(this.$route.query.id);
            });
            window.addEventListener('scroll', this.handleScroll,true);

            let userinfo = localStorage.getItem('userinfo');
            if(userinfo){
                this.user_id = JSON.parse(userinfo).user_id;
            }
        },
        methods: {
            handleScroll(){
                let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                let sbody = this.$refs.sbody.offsetHeight - document.documentElement.clientHeight || window.innerHeight;
                if(sbody==top){
                    if(this.pagenum<this.totalPage){
                        this.pagenum++;
                        this.getmisdata();
                        this.loadText = '加载更多';
                    }else{
                        this.loadText = '暂无更多';
                    }
                }
            },
            turnclick(state) {
                this.iscur = state;

                switch (state) {
                    case 2:
                        this.buttontext = '分享';
                        break;
                    case 0:
                        this.buttontext = '继续任务';
                        break;
                    case 1:
                        this.buttontext = '审核中';
                        break;
                    case 3:
                        this.buttontext = '已下线';
                        break;
                    default:
                        this.buttontext = '分享';
                        break;
                }

                this.pagenum = 1;
                this.getmisdata();
                this.listmis = [];
            },

            getmisdata() {
                axiosPost('task/task_list_type', {
                    'select_type': this.iscur,
                    'page': this.pagenum,
                    'page_size': 10
                }, (res) => {
                    //console.log(res)
                    this.pagelistmis = [];
                    if (res.code !== 1) {
                        return
                    }
                    this.totalPage = Math.ceil(res.total/10)
                    if(this.pagenum<this.totalPage){
                        this.loadText = '加载更多';
                    }else{
                        this.loadText = '暂无更多';
                    }
                    for (let item of res.data) {
                        this.listmis.push(item)
                        this.pagelistmis.push(item)
                    }
                });
            },

            tomission(id,state,task_id) {
                //console.log(this.iscur)
                switch (this.iscur) {
                    case '0':
                        this.$router.push({path: '/steps', query: {task_id: id, state: 0}});
                        break;
                    case '2':
                        if(state===1){
                            this.$router.push({path: '/share', query: {task_id: task_id,user_id:this.user_id}});
                        }
                        break;
                    case 0:
                        this.$router.push({path: '/steps', query: {task_id: id, state: 0}});
                        break;
                    case 2:
                        if(state===1){
                            this.$router.push({path: '/share', query: {task_id: task_id,user_id:this.user_id}});
                        }
                        break;
                    default:
                        break;
                }

            }
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll,true)
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/default";
    .sbody{
        background: @color7;
        overflow: auto;
    }
    .tabNav {
        height: 0.9rem;
        background: #fff;
        overflow: hidden;

        .tab_active p {
            border-color: @color1;
        }

        .tab_active div {
            color: @color1;
        }

        li {
            width: 25%;
            height: 0.9rem;
            float: left;
            text-align: center;
            cursor: pointer;

            p {
                border-bottom: 0.06rem solid transparent;
                width: 0.5rem;
                margin: 0 auto;
            }

            div {
                padding: 0 0;
                display: inline-block;
                margin: 0 auto;
                height: 0.82rem;
                font-size: 0.32rem;
                font-weight: 400;
                color: @color5;
                line-height: 0.82rem;
            }
        }
    }

    .missionlist {
        padding: 0.4rem 0.4rem 0 0.4rem;

        li {
            background: @color4;
            min-height: 2rem;
            margin-bottom: 0.4rem;
            padding: 0 0.3rem;

            div {
                height: 1rem;
                line-height: 1rem;

                h1 {
                    font-size: @font32;
                    color: @color3;
                    font-weight: normal;
                    float: left;
                    max-width: 5rem;
                }

                h2 {
                    font-size: @font24;
                    color: #888888;
                    font-weight: normal;
                    float: right;
                }

                a {
                    font-size: @font28;
                    color: @color3;
                    float: left;
                }

                h3 {
                    min-width: 0.87rem;
                    background: #CCCCCC;
                    border-radius: 0.26rem;
                    float: right;
                    text-align: center;
                    line-height: normal;
                    font-size: @font28;
                    color: @color4;
                    font-weight: normal;
                    margin-top: 0.24rem;
                    padding: 0.06rem 0.12rem;
                }

                .active {
                    background: @color1;
                }
            }

            div:nth-child(1) {
                border-bottom: 1px solid #efefef7a;
            }
        }
    }

    h5{
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        color: @color2;
        font-size: @font28;
        padding-bottom: 0.4rem;
    }

</style>